<template>
  <div class="msite">
    <header-top>
      <a class="header_center" slot="center" style="width:130px;text-align: center;">
        <button-tab>
          <button-tab-item selected>深圳</button-tab-item>
          <button-tab-item>广州</button-tab-item>
        </button-tab>
      </a>
      <router-link class="header_right" slot="right" to="/search">
        <img src="../../assets/images/btn_ss_n.png" style="width: 18px;height:20px;"/>
      </router-link>
    </header-top>
    <div class="msite_content">
      <div class="msite_content_header">
        <flexbox style="border-bottom: 1px solid #ccc;">
          <flexbox-item @click.native="handSelect('xianmuSelect')">
            <div class="msite_content_select">
              <img src="./images/btn_xiangmu.png" style="width: 77px;height: 14px;"/>
            </div>
          </flexbox-item>
          <flexbox-item @click.native="handSelect('jiageSelect')">
            <div class="msite_content_select">
              <img src="./images/btn_jiage.png" style="width: 77px;height: 14px;"/>
            </div>
          </flexbox-item>
        </flexbox>
        <div class="select_item" v-show="xianmuSelect">
          <flexbox v-for="(xianmu, index) in xianmuList" :key="index">
            <flexbox-item v-for="(item, index) in xianmu.item" :key="index"
                          @click.native="handSelectItem(item.value, 'xianmuList')">
              <div class="msite_content_select">
                <div :class={active:item.select} :style="{marginLeft: index>0?'0px':''}">{{item.name}}</div>
              </div>
            </flexbox-item>
          </flexbox>
        </div>
        <div class="select_item" v-show="jiageSelect">
          <flexbox :style="{marginTop: index>0? '-10px':''}" v-for="(xianmu, index) in jiageList" :key="index">
            <flexbox-item v-for="(item, index) in xianmu.item" :key="index"
                          @click.native="handSelectItem(item.value, 'jiageList')">
              <div class="msite_content_select">
                <div :class={active:item.select} :style="{marginLeft: index>0?'0px':''}">{{item.name}}</div>
              </div>
            </flexbox-item>
            <flexbox-item v-if="xianmu.item.length<3" v-for="(index) in (3-xianmu.item.length)" :key="index"
                          @click.native="handSelectItem(xianmu.item.value, 'jiageList')">
              <div class="msite_content_select"></div>
            </flexbox-item>
          </flexbox>
        </div>
      </div>
      <div class="msite_content_swiper">
        <swiper :list="swiperImgList" auto style="width:100%;margin:0 auto;" height="110px"
                dots-position="center"></swiper>
      </div>
      <shop-list/>
      <div style="height: 72px;"></div>
    </div>
    <div v-show="mark" class="mask" @click="mark=false,jiageSelect=false,xianmuSelect=false"></div>
  </div>
</template>

<script>
  import {ButtonTab, ButtonTabItem, Tab, TabItem, Flexbox, FlexboxItem, Grid, GridItem, Swiper, XButton} from 'vux'
  import HeaderTop from '../../components/HeaderTop/HeaderTop'
  import ShopList from '../../components/ShopList/ShopList'

  const imgList = [
    require('./images/0721js001.png'),
    require('./images/0721js002.png'),
    require('./images/0721js003.png'),
  ]

  const swiperImgList = imgList.map((one, index) => ({
    url: 'javascript:',
    img: one
  }))

  export default {
    name: "MSite",
    data() {
      return {
        xianmuList: [{
          item: [
            {name: '洗剪吹', select: true, value: "1"},
            {name: '烫染', select: false, value: "2"},
            {name: '护理', select: false, value: "3"}]
        }],
        jiageList: [{
          item: [
            {name: '30以下', select: true, value: "1"},
            {name: '30-60', select: false, value: "2"},
            {name: '60-120', select: false, value: "3"}]
        }, {
          item: [
            {name: '120以上', select: false, value: "4"}]
        }],
        xianmuSelect: false,
        jiageSelect: false,
        mark: false,
        swiperImgList: swiperImgList
      }
    },
    components: {
      ButtonTab,
      ButtonTabItem,
      Tab,
      TabItem,
      Flexbox,
      FlexboxItem,
      Grid,
      GridItem,
      Swiper,
      XButton,
      HeaderTop,
      ShopList
    },
    methods: {
      handSelect(type) {
        let {mark, jiageSelect, xianmuSelect} = this;
        this.mark = true;
        if (type == 'xianmuSelect') {
          if (xianmuSelect) {
            this.xianmuSelect = false;
            this.mark = false;
            return;
          }
          this.jiageSelect = false;
          this.xianmuSelect = true;
        } else if (type == 'jiageSelect') {
          if (jiageSelect) {
            this.jiageSelect = false;
            this.mark = false;
            return;
          }
          this.jiageSelect = true;
          this.xianmuSelect = false;
        }
      },
      handSelectItem(selectValue, type) {
        const {xianmuList, jiageList} = this;
        if (type == 'xianmuList') {
          xianmuList.map(xianmu => {
            let xianmuItem = xianmu.item;
            xianmuItem.map(objItem => {
              let {value} = objItem;
              if (selectValue == value) {
                objItem.select = !objItem.select;
              }
            });
          });
        } else if (type == 'jiageList') {
          jiageList.map(jiage => {
            let jiageItem = jiage.item;
            jiageItem.map(objItem => {
              let {value} = objItem;
              if (selectValue == value) {
                objItem.select = !objItem.select;
              }
            });
          });
        }
      },
    },
  }
</script>

<style scoped>
  .msite_content {
    margin-top: 48px;
  }

  .msite_content_header {
    position: fixed;
    left: 0px;
    top: 48px;
    background-color: #fff;
    z-index: 5000;
    height: 40px;
    line-height: 40px;
    width: 100%;
  }

  .msite_content_select {
    text-align: center;
  }

  .select_item {
    background-color: #fff;
  }

  .msite_content_select div {
    border: 1px solid #ccc;
    color: #000;
    border-radius: 3px;
    margin: 10px;
    background-clip: padding-box;
  }

  .msite_content_select .active {
    border: none;
    background-color: #ff6633;
    color: #fff;
  }

  .msite_content_swiper {
    margin-top: 88px;
  }

</style>
